import {
  BaseEventOrig,
  Checkbox,
  CheckboxGroup,
  View,
} from "@tarojs/components";
import style from "./index.module.scss";

interface CheckBoxProps {
  onChangeCb: (
    e: BaseEventOrig<{
      value: string[];
    }>
  ) => void;
  checked: boolean;
  intiallyChecked?: boolean;
  hideCheckbox?: boolean;
}

export const CheckBox = ({
  onChangeCb,
  checked,
  intiallyChecked = false,
  hideCheckbox = false,
}: CheckBoxProps) => {
  return (
    <View className={style["checkbox-grouping"]}>
      <CheckboxGroup className={style["checkbox-group"]} onChange={onChangeCb}>
        {!hideCheckbox ? (
          <>
            <Checkbox value="NOT_USED" checked={intiallyChecked} />
            <View className={style["checkbox-bg"]} />
            <View
              className={style["checkbox-active"]}
              style={{
                opacity: checked ? 1 : 0,
              }}
            />
          </>
        ) : (
          <View className={style["unavailable-spacing"]} />
        )}
      </CheckboxGroup>
    </View>
  );
};
